<template>
  <view class="pages">
    <u-steps :current="current" activeColor="#f09a3c" style="margin-bottom: 30px;">
      <u-steps-item title="實名認證"> </u-steps-item>
      <u-steps-item title="頭像設定"></u-steps-item>
    </u-steps>
    <view v-if="current==0">
        <view class="title">
          1. 實名認證
        </view>
        <view class="illustrate" style="margin-bottom: 30px;">
          個人資訊加密保護中，僅用於身份驗證。
        </view>
        <view class="title">
          身份證照片
        </view>
        <view class="IDcard">
          <view class="IDcard-li">
              <u-upload
                :fileList="IDcardFile1"
                @afterRead="IDcardFileRead"
                @delete="deleteIDcardFile"
                name="1"
                multiple
                :maxCount="1"
              >
              <image class="IDcard-li-img" src="@/static/images/1.png" ></image>
            </u-upload>
           
          </view>
          <view class="IDcard-li">
              <u-upload
                :fileList="IDcardFile2"
                @afterRead="IDcardFileRead"
                @delete="deleteIDcardFile"
                name="2"
                multiple
                :maxCount="1"
              >
              <image class="IDcard-li-img" src="@/static/images/2.png" ></image>
            </u-upload>
          </view>
        </view>

        <view class="title">
          身份證資訊
        </view>
        <view class="illustrate" style="margin-bottom: 10px;">
          請仔細核對資訊
        </view>
          <u--form
              labelPosition="left"
              :model="userInfo"
              labelWidth="100"
              :rules="rules"
              ref="uForm"
          >
              <u-form-item
                  label="姓名"
                  prop="userInfo.name"
                  borderBottom
                  ref="item1"
              >
              <u--input
                  v-model="userInfo.name"
                  placeholder="請輸入"
                  border="none"
              ></u--input>
            </u-form-item>
            <u-form-item
                  label="身份證"
                  prop="userInfo.id"
                  borderBottom
                  ref="item1"
              >
              <u--input
                  v-model="userInfo.id"
                  placeholder="請輸入"
                  border="none"
              ></u--input>
            </u-form-item>
          </u--form>
      <view class="switch">
        <u-switch style="margin-right: 10px;" v-model="value" size="20" activeColor="#f09a3c" ></u-switch>
        我已閱讀並同意等署<span>《實名認證協定》</span>?
      </view>
      <u-button @click="current=1" type="warning" text="確定並進入下一步"></u-button>
    </view>
    <view v-if="current==1">
      <view class="title">
          2. 頭像設定
        </view>
        <view class="illustrate" style="margin-bottom: 30px;">
          請設定您的頭像
        </view>
        <u--form
        style="margin-bottom: 80px;"
              labelPosition="left"
              :model="userInfo"
              labelWidth="100"
              :rules="rules"
              ref="uForm"
          >
            <u-form-item
                  label="頭像"
                  prop="userInfo.pic"
                  borderBottom
                  ref="item1"
              >
              <u-upload
                  :fileList="IDcardFile3"
                  @afterRead="IDcardFileRead"
                  @delete="deleteIDcardFile"
                  name="3"
                  multiple
                  :maxCount="1"
                >
              </u-upload>
            </u-form-item>
            <u-form-item
                  label="签名"
                  prop="userInfo.qm"
                  borderBottom
                  ref="qm"
              >
              <u--input
                  v-model="userInfo.qm"
                  placeholder="請輸入"
                  border="none"
              ></u--input>
            </u-form-item>
          </u--form>
      <u-button type="warning" text="確定"></u-button>
      <u-button style="margin-top: 10px;" @click="current=0" type="warning" text="返回上一步" plain></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current:0,
        value:false,
        userInfo:{
          name:'用户姓名',
          id:'12312312312312'
        },
        rules: {
          'userInfo.name': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
          },
        },
        IDcardFile1:[],
        IDcardFile2:[],
        IDcardFile3:[]
      };
    },
    components: {
    
    },
   
    onLoad() {
     
    },
    methods: {
     // 删除图片
        deleteIDcardFile(event) {
          this[`IDcardFile${event.name}`].splice(event.index, 1);
        },
        // 新增图片
        async IDcardFileRead(event) {
          console.log(event)
          // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
          let lists = [].concat(event.file);
          let fileListLen = this[`IDcardFile${event.name}`].length;
          lists.map((item) => {
            this[`IDcardFile${event.name}`].push({
              ...item,
              status: "uploading",
              message: "上传中",
            });
          });
          for (let i = 0; i < lists.length; i++) {
            const result = await this.uploadFilePromise(lists[i].url);
            let item = this[`IDcardFile${event.name}`][fileListLen];
            this[`IDcardFile${event.name}`].splice(
              fileListLen,
              1,
              Object.assign(item, {
                status: "success",
                message: "",
                url: result,
              })
            );
            fileListLen++;
          }
        },
        uploadFilePromise(url) {
          return new Promise((resolve, reject) => {
            let a = uni.uploadFile({
              url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
              filePath: url,
              name: "file",
              formData: {
                user: "test",
              },
              success: (res) => {
                setTimeout(() => {
                  resolve(res.data.data);
                }, 1000);
              },
            });
          });
        },
    }
  }
</script>

<style lang="scss" scoped>
 .pages{
  padding: 30rpx;
  .switch{
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    color: #999;
    font-size: 14px;
    line-height: 20px;
    span{
      color: #f09a3c;
    }
  }
  .title{
    margin: 30rpx 0;
    font-size: 16px;
    font-weight: bold;
  }
  .illustrate{
    font-size: 14;
    color: #999;
  }
  .IDcard{
    display: flex;
    margin-bottom: 30px;
    &-li{
      flex: 1;
      text-align: center;
      &-upload{
        margin: 10px auto;
        display: inline-block;
      }
      &-img{
        width: 160px;
        height: 120px;
      }
    }
  }
 }
 
</style>